import React,{useState,useMemo} from 'react'
import './shopcart.css'

/*
    1、作用:useMemo是模拟vue的计算属性的
    2、语法:
    useMemo(参数1，参数2)
    参数1：完成计算属性功能的回调函数
    参数2：要依赖的数据的数组
    返回值：计算属性得到的最终结果
    3、步骤
    1）导入useMemo:import {useMemo} from 'react'
    2) 在函数组件的内部调用useMemo函数
*/
export default function ShopCart() {
  const [shopcartList,setShopcartList]=useState([
    {
        id:'1001',
        name:'苹果',
        price:3.5,
        num:1,
        checked:true
    },
    {
        id:'1002',
        name:'香蕉',
        price:2.5,
        num:1,
        checked:false
    },
    {
        id:'1003',
        name:'葡萄',
        price:5.8,
        num:1,
        checked:true
    }
  ])
  //更改购物车商品的数量
  const changeNum=(op,id)=>{
     const newShopcartList=shopcartList.map(item=>{
        if(item.id===id){
            if(op==="+"){   
                item.num++
            }else if(op==="-"){
                if(item.num>0){
                    item.num--
                }
            }
        }
        return item
     })
     setShopcartList(newShopcartList)
  }
  const handleCheckChange=(e,id)=>{
    
    const newShopcartList=shopcartList.map(item=>{
        if(item.id===id){
           item.checked=e.target.checked
        }
        return item
     })
     setShopcartList(newShopcartList)
  }
  const handleNumChange=(e,id)=>{
    const newShopcartList=shopcartList.map(item=>{
        if(item.id===id){
           item.num=e.target.value
        }
        return item
     })
     setShopcartList(newShopcartList)
  }

  //const getTotal=()=>shopcartList.filter(item=>item.checked).reduce((pre,cur)=>pre+cur.price*cur.num,0)
  
  const total=useMemo(()=>{
    return shopcartList.filter(item=>item.checked).reduce((pre,cur)=>pre+cur.price*cur.num,0)
  },[shopcartList])


  return (
    <div>
        <table>
            <thead>
                <tr>
                    <td>编号</td>
                    <td>名称</td>
                    <td>价格</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                {
                    shopcartList.map(item=><tr key={item.id}>
                        <td>
                            <input type="checkbox" checked={item.checked} onChange={(e)=>handleCheckChange(e,item.id)}/>
                        </td>
                        <td>{item.name}</td>
                        <td>{item.price}</td>
                        <td>
                            <button onClick={()=>changeNum('-',item.id)}>-</button>
                            <span><input type="text" value={item.num} onChange={e=>handleNumChange(e,item.id)}/></span>
                            <button onClick={()=>changeNum('+',item.id)}>+</button>
                        </td>
                        <td>{(item.price*item.num).toFixed(2)}</td>
                        <td>
                            <button>删除</button>
                        </td>
                    </tr>)
                }
            </tbody>
            <tfoot>
                <tr>
                    <td colSpan={6}>总价:{total}</td>
                </tr>
            </tfoot>
        </table>

    </div>
  )
}
